<template>
    <view class="p-48 single-word flex-col">
        <view class="single-word-header flex-between-center m-b-20">
            <text class="jrdc">今日单词</text>
            <view>
                <nut-button color="transparent" class="flex-center" size="small">
                    <template #icon>
                        <IconFont class="m-r-10" color="#64748B" font-class-name="iconfont" class-prefix="icon"
                            name="filter" size="18" />
                        <text class="sx">筛选</text>
                    </template>
                </nut-button>
            </view>
        </view>
        <view class="word-card">
            <ScrollBar>
                <view class="word-card-item r-25 m-b-30 p-20" v-for="item in 40" :key="item">
                    <view class="font-time p-b-20">
                        <text class="f flex-center r5 f-bold m-r-10">汉</text>
                        <text class="t">2023-10-12</text>
                    </view>
                    <view class="font-info p-t-15">
                        <view class="f-bold list-item-title fs-28 m-b-5">
                            <text class="m-r-5">拼音:</text>
                            <text class="pin-yin">{{ pinYin('汉', "tone",
                                "poly")
                            }}</text>
                        </view>
                        <view class="f-bold list-item-title fs-28 m-b-5">
                            <text class="m-r-5">部首:</text><text class="m-r-30 bu-shou">{{ getPP() }}</text>
                            <text class="m-r-5">笔数:</text><text class="bi-shu">{{ fontHasStep('嘿') }}</text>
                        </view>
                        <view class="f-bold list-item-title fs-28 m-b-5"><text class="m-r-5">释义:</text><text
                                class="shi-yi">速度发货及时收到反馈会尽快胜多负少较大收到回复就开始地方答复</text></view>

                    </view>
                </view>
            </ScrollBar>
        </view>
    </view>
</template>
<script setup>
import { IconFont } from '@nutui/icons-vue-taro';
import ScrollBar from "../../components/ScrollBar/index.vue";
import { pinYin, randomFont, fontPP, fontHasStep } from '@/utils/font.js'

function getPP() {

    const [data] = fontPP('嘿')
    return data.radical
}
</script>
<style lang="scss">
.single-word {
    // background-color: red;
    padding: 0 48px 10px;
    flex: 1;
}

.single-word-header {}

.sx {
    color: #64748B;
}

.jrdc {
    color: $color-base;
}

.word-card {
    flex: 1;
    height: 0;

    &-item {

        // height: 300px;
        height: fit-content;
        background-color: $color-page-bg;
        border: 1px solid #bfc8d3;

        .font-time {
            height: 40%;
            border-bottom: 1px solid #e3e8ef;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .f {
                width: 80px;
                height: 80px;
                background-color: #46bd84;
                color: #fff;
                font-size: 40px;
            }
        }

        .font-info {
            height: 60%;
        }
    }
}
</style>